<template>
    <div class="login-wrap">
        <el-form class="login-container" @keydown.enter="toDoRegister(formRef)" :rules=rules :model="ValidateForm" ref="formRef">
            <h1 class="title">账号注册</h1>
            <el-form-item  prop="userAccount" style="padding-bottom: 5px">
                <el-input type="text" v-model="ValidateForm.userAccount" placeholder="用户账号" ></el-input>
            </el-form-item>
            <el-form-item  prop="password" style="padding-bottom: 5px">
                <el-input type="password" v-model="ValidateForm.password" placeholder="用户密码" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item  prop="checkPassword" style="padding-bottom: 5px">
                <el-input type="password" v-model="ValidateForm.checkPassword" placeholder="确认密码" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="doRegister(formRef)" style="width: 100%;">注册</el-button>
            </el-form-item>
            <el-row style="text-align: center;margin-top: -10px;display: flex;justify-content: space-between">
                <el-link type="primary"></el-link>
                <el-link type="primary" @click="toLogin">返回登录</el-link>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>

import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import myAxios from "../../plugins/myAxios.js";
const router = useRouter();


const ValidateForm = reactive({
    userAccount:'',
    password:'',
    checkPassword:''
})

//保存表单中的数据，最后来验证是否 符合规则
const formRef = ref();

//验证规则
const rules = reactive({
    userAccount:[
        { required: true, message: '账号未输入',trigger: 'blur'},
        { min:4,max:12,message: '长度需要大于4或者小于12', trigger: 'blur'}
    ],
    password:[
        { required: true, message: '密码未输入' ,trigger: 'blur'},
        { min:6,max:12,message: '密码需要大于6或者小于12', trigger: 'blur'}
    ],
    checkPassword:[
        { required: true, message: '账号未输入' ,trigger: 'blur'},
        { min:6,max:12,message: '长度需要大于6或者小于12', trigger: 'blur'}
    ]
})


//返回登录页
const toLogin = ()=>{
    router.push({path:'/login'});
}

//按下回车登录
const toDoRegister = (formRef)=>{
    doRegister(formRef);
}
const doRegister = (formEle)=> {
    if (!formEle) {
        ElMessage.error("登录出错")
        return;
    }
    formEle.validate((valid) => {
        if (valid) {
            if(ValidateForm.password != ValidateForm.checkPassword){
                ElMessage.error("两次密码输入不一致，请重新输入")
                return false;
            }else{
                registry(formEle);
            }
        } else {
            ElMessage.error("账号密码不符合规则")
            return false;
        }
    })
}

const registry = async (formEle)=>{
    const res = await myAxios.post('/user/register', {
        userAccount: ValidateForm.userAccount,
        userPassword: ValidateForm.password,
        checkPassword: ValidateForm.checkPassword
    })
    if(res){
        ElMessage.success("注册成功")
        formEle.resetFields()//表单重置
    }else{
        ElMessage.error("注册失败")
        return false;
    }
}

</script>
<style scoped lang="less">
.login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url("../../assets/img/background.jpg");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
}

.login-container {
    border-radius: 10px;
    margin: 0 auto;
    width: 400px;
    padding: 30px 35px 25px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
    margin: 0 auto 40px auto;
    text-align: center;
    color: #505458;
}
</style>